<template>
  <section>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick"  v-loading="loading">
      <el-tab-pane label="全部" name="1">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <el-table-column  prop="name" label="买家姓名">
          </el-table-column>
          <el-table-column  prop="phone" label="买家电话">
          </el-table-column>
          <el-table-column  prop="tmp[0].goodsName" label="商品名称">
          </el-table-column>
          <el-table-column  prop="weight" label="商品颜色" >
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.color }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="商品规格">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.size }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  prop="price"  label="商品单价">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.discPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="swiperPic" label="自定义图案"  width="200">
            <template slot-scope="scope">
              <img  :src="scope.row.tmp[0].swiperPic" alt="" style="width: 200px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="totalMoney" label="订单总金额（元）"> </el-table-column>
          <el-table-column prop="date" label="下单时间"> </el-table-column>
          <el-table-column prop="orderState" label="订单状态">
            <template slot-scope="scope" >
              <div v-if="scope.row.ifPay == false">待付款</div>
              <div v-else-if="scope.row.ifPay == true && scope.row.ifSend == false && scope.row.ifGet == false">待发货</div>
              <div v-else-if="scope.row.ifPay == true && scope.row.ifSend == true && scope.row.ifGet == false">已发货</div>
              <div v-else-if="scope.row.ifPay == true && scope.row.ifSend == true && scope.row.ifGet == true">已完成</div>
              <div v-else-if="scope.row.ifCancel == true">取消订单</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope" >

              <div v-if="scope.row.ifPay == false">
                <el-button size="mini" @click="editMoney(scope.$index, scope.row)">修改价格</el-button>
                <el-button size="mini"   @click="details(scope.$index, scope.row)">详情</el-button>
              </div>
              <div  v-else-if="scope.row.ifPay == true && scope.row.ifSend == false && scope.row.ifGet == false">
                <el-button size="mini" @click="download(scope.$index, scope.row)">
                  <a :href="scope.row.tmp[0].swiperPic" download>图案下载</a>
                </el-button>
                <el-button size="mini" type="info" @click="logistics(scope.$index, scope.row)">物流分配</el-button>
                <el-button size="mini"  @click="details(scope.$index, scope.row)">详情</el-button>
              </div>
              <div  v-else-if="scope.row.ifPay == true && scope.row.ifSend == true && scope.row.ifGet == false">
                <el-button size="mini" type="success" @click="confirmReceipt(scope.$index, scope.row)">确认收货</el-button>
              </div>
              <el-button size="mini"  v-else  @click="details(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待付款" name="2">
        <el-table :data="tableData" style="width: 100%"  v-loading="loading">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <el-table-column  prop="name" label="买家姓名">
          </el-table-column>
          <el-table-column  prop="phone" label="买家电话">
          </el-table-column>
          <el-table-column  prop="tmp[0].goodsName" label="商品名称">
          </el-table-column>
          <el-table-column  prop="weight" label="商品颜色" >
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.color }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="商品规格">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.size }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  prop="price"  label="商品单价">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.discPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="swiperPic" label="自定义图案" width="200">
            <template slot-scope="scope">
              <img  :src="scope.row.tmp[0].swiperPic" alt="" style="width: 200px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="totalMoney" label="订单总金额（元）"> </el-table-column>
          <el-table-column prop="date" label="下单时间"> </el-table-column>
          <el-table-column prop="orderState" label="订单状态">
            <template slot-scope="scope">
              <div v-if="scope.row.ifPay == false">待付款</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="editMoney(scope.$index, scope.row)">修改价格</el-button>
              <el-button size="mini"   @click="details(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待发货" name="3"  v-loading="loading">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <el-table-column  prop="name" label="买家姓名">
          </el-table-column>
          <el-table-column  prop="phone" label="买家电话">
          </el-table-column>
          <el-table-column  prop="tmp[0].goodsName" label="商品名称">
          </el-table-column>
          <el-table-column  prop="weight" label="商品颜色" >
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.color }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="商品规格">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.size }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  prop="price"  label="商品单价">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.discPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="swiperPic" label="自定义图案" width="200">
            <template slot-scope="scope">
              <img  :src="scope.row.tmp[0].swiperPic" alt="" style="width: 200px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="totalMoney" label="订单总金额（元）"> </el-table-column>
          <el-table-column prop="date" label="下单时间"> </el-table-column>
          <el-table-column prop="orderState" label="订单状态">
            <template slot-scope="scope">
              <div v-if="scope.row.ifPay == true">待发货</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <el-button size="mini" @click="download(scope.$index, scope.row)"> <a :href="scope.row.tmp[0].swiperPic" download>图案下载</a></el-button>
              <el-button size="mini" type="info" @click="logistics(scope.$index, scope.row)">物流分配</el-button>
              <el-button size="mini"  @click="details(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已发货" name="4"  v-loading="loading">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <el-table-column  prop="name" label="买家姓名">
          </el-table-column>
          <el-table-column  prop="phone" label="买家电话">
          </el-table-column>
          <el-table-column  prop="tmp[0].goodsName" label="商品名称">
          </el-table-column>
          <el-table-column  prop="weight" label="商品颜色" >
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.color }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="商品规格">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.size }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  prop="price"  label="商品单价">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.discPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="swiperPic" label="自定义图案" width="200">
            <template slot-scope="scope">
              <img  :src="scope.row.tmp[0].swiperPic" alt="" style="width: 200px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="totalMoney" label="订单总金额（元）"> </el-table-column>
          <el-table-column prop="date" label="下单时间"> </el-table-column>
          <el-table-column prop="orderState" label="订单状态">
            <template slot-scope="scope">
              <div v-if="scope.row.ifSend == true">已发货</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="confirmReceipt(scope.$index, scope.row)">确认收货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="5"  v-loading="loading">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <el-table-column  prop="name" label="买家姓名">
          </el-table-column>
          <el-table-column  prop="phone" label="买家电话">
          </el-table-column>
          <el-table-column  prop="tmp[0].goodsName" label="商品名称">
          </el-table-column>
          <el-table-column  prop="weight" label="商品颜色" >
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.color }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="商品规格">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.size }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  prop="price"  label="商品单价">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.discPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="swiperPic" label="自定义图案" width="200">
            <template slot-scope="scope">
              <img  :src="scope.row.tmp[0].swiperPic" alt="" style="width: 200px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="totalMoney" label="订单总金额（元）"> </el-table-column>
          <el-table-column prop="date" label="下单时间"> </el-table-column>
          <el-table-column prop="orderState" label="订单状态">
            <template slot-scope="scope">
              <div v-if="scope.row.ifGet == true">已完成</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini"   @click="details(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="取消订单" name="6"  v-loading="loading">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index"  label="序号"> </el-table-column>
          <el-table-column  prop="name" label="买家姓名">
          </el-table-column>
          <el-table-column  prop="phone" label="买家电话">
          </el-table-column>
          <el-table-column  prop="tmp[0].goodsName" label="商品名称">
          </el-table-column>
          <el-table-column  prop="weight" label="商品颜色" >
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.color }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="商品规格">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.size }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column  prop="price"  label="商品单价">
            <template slot-scope="scope">
              <div class="content-rowspan">
                <div v-for="value in scope.row.tmp">{{ value.discPrice }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="swiperPic" label="自定义图案" width="200">
            <template slot-scope="scope">
              <img  :src="scope.row.tmp[0].swiperPic" alt="" style="width: 200px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="totalMoney" label="订单总金额（元）"> </el-table-column>
          <el-table-column prop="date" label="下单时间"> </el-table-column>
          <el-table-column prop="orderState" label="订单状态">
            <template slot-scope="scope">
              <div v-if="scope.row.ifCancel == true">取消订单</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini"  @click="details(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="" :visible.sync="dialogFormVisible">
        <h3>修改价格</h3>
        <el-input v-model="totalRow.total" auto-complete="off"></el-input>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="subMoney">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="" :visible.sync="detailsvisible">
      <div>
           <div class="left-tit">买家信息</div>
            <div class="right-tit">
                 <div class="main">
                       <div>姓名：{{detailsRow.name}}</div>
                       <div>联系方式： {{detailsRow.phone}}</div>
                      <div>地址： {{detailsRow.preAddress}}{{detailsRow.detailAddress}}</div>
                 </div>
            </div>
      </div>
      <div>
        <div class="left-tit">商品信息</div>
        <div class="right-tit">
          <img src="" alt="">
          <div class="main" v-for=" i in detailsRow.tmp">
            <div>标题： {{i.goodsName}}</div>
            <div>规格： {{i.size}}</div>
            <div>数量： {{i.num}}</div>
          </div>
        </div>
      </div>
      <div>
        <div class="left-tit">订单情况</div>
        <div class="right-tit">
          <img src="" alt="">
          <div class="main">
            <div>下单时间： {{detailsRow.date}}</div>
            <div>订单编号： {{detailsRow.order_sheet}}</div>
            <div>订单费用： ￥{{detailsRow.totalMoney}}</div>
            <!--<div>定制图案： <img :src="detailsRow.tmp[0].swiperPic" alt="" width="100" height="100"></div>-->
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsvisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title=""  :visible.sync="dialoglogistics">
          <el-form :model="formlogistics" :rules="rules" ref="formlogistics" label-width="100px">

          <el-form-item label="快递公司"  prop="company">
            <el-select v-model="formlogistics.company" placeholder="请选择快递公司">
              <el-option v-for="item in getlogcompanyData" :key="item.logcompany" :label="item.logcompany" :value="item.logcompany"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单号"  prop="oddnum">
            <el-input v-model="formlogistics.oddnum" style="width: 250px;"></el-input>
          </el-form-item>
          <el-form-item label="配送员"  prop="courier">
            <el-select v-model="formlogistics.courier" placeholder="请选择快递员">
              <el-option v-for="item in LogisticsData" :key="item.courier" :label="item.courier" :value="item.courier"> </el-option>
            </el-select>
          </el-form-item>
            <!--<el-form-item label="配送员电话">-->
              <!--<el-input v-model="formlogistics.phone" style="width: 250px;"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item>
              <el-button type="primary" @click="onSubmitlogistics">提交</el-button>
              <el-button  @click="dialoglogistics = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import axios from "axios"

  export default {
      data() {
        return {
          activeName: '1',
          activeName2:"1",
          tableData:[],

          dialogFormVisible:false,
          detailsvisible:false,
          dialoglogistics:false,
          page:1,
          type:'',
          count:0,
          loading:true,
          totalRow:{
            id:"",
            total:""
          },
          detailsRow:{},
          inputlogistics:"",

          formlogistics:{
            company:"",
            oddnum:"",
            courier:"",
            phone:""
          },
          LogisticsData:[],
          getlogcompanyData:[],
          logisticsid:"",

          rules: {
            oddnum: [
              {required: true, message: '请输入单号', trigger: 'blur'},
            ],
            company: [
              {required: true, message: '请选择配送公司', trigger: 'change'}
            ],
            courier: [
              {required: true, message: '请选择配送员', trigger: 'change'}
            ],
          }
        };
      },
      mounted(){
          this.init();

      },
      methods: {
          handleClick(tab, event) {
            if (tab.label == "全部"){
              this.type = "";
              this.init();
            } else {

              this.type = tab.label;
              this.init()
            }

          },
          details(index,row){
            this.detailsvisible = true;
            this.detailsRow = row;
          },
          editMoney(index,row){
            this.dialogFormVisible = true;
            this.totalRow.id=row._id;
            this.totalRow.total=row.total;
          },
          subMoney(){
            axios.post("/order/editTotal",
              this.totalRow
            ).then((response) => {
              let res = response.data;
              if (res.status == "0") {
                this.dialogFormVisible = false;
                this.init()
              }
            })
          },
          init(){
              let param ={
                  page:this.page,
                  pageSize:10,
                  type:this.type,
              }
              axios.get("/order/getOrders",{
                  params:param
              }).then((response)=>{
                  let res = response.data;
                  if (res.status == "0"){
                      this.tableData = res.result.list;
                      this.count = res.result.count;
                      this.loading = false;
                  }
              })
          },
        logistics(index,row){
          this.dialoglogistics = true;
          // this.$router.push('/logistics/logistics.vue')
          this.getLogistics();
          this.getlogcompany();
          this.logisticsid = row._id;
        },
        getLogistics(){
          axios.get("/logistics/getLogistics",{

          }).then((response)=>{
            let res = response.data;
            if (res.status == "0"){
              this.LogisticsData = res.result.list;
            }
          })
        },
        getlogcompany(){
          axios.get("/logistics/getlogcompany").then((response)=>{
            let res = response.data;
            if (res.status == "0"){
              this.getlogcompanyData = res.result.list;
            }
          })
        },
        download(){},
        onSubmitlogistics(){
          this.$refs.formlogistics.validate((valid) => {
            if (valid) {
              axios.post("/order/editExpress", {
                id:this.logisticsid,
                company:this.formlogistics.company,
                oddnum:this.formlogistics.oddnum,
                courier:this.formlogistics.courier,
                //phone:this.formlogistics.phone
              }).then((response) => {
                this.dialoglogistics = false;
                this.init();
              })
            } else {
              console.log('error submit!!');
            }
          })

        },
        confirmReceipt(index,row){
          axios.post("/order/confirmReceipt", {
            id:row._id,
          }).then((response) => {
            this.init();
          })
        },
  }

    }
</script>

<style  lang="scss" scoped>
  .content-rowspan div {
    padding-left: 13px;
    line-height: 46px;
    border-bottom: 1px solid #ECEDEE;
  }
  .content-rowspan div:last-child {
    border-bottom: 0;
  }
  .el-tabs{
    margin-top: 20px;
  }
</style>
